import React from 'react'

import {
  Popover,
} from 'antd-mobile'

import { Link } from 'dva/router'

// Component
import Card from '../../../components/Card'
import CircleProgress from '../../../components/Progress'

// Data
import {
  overviewData,
  threeListData,
} from '../data'

// styles
import styles from '../styles.less'

// Component
const Item = Popover.Item

export default class Overview extends React.Component {
  state = {
    overviewData: [],
    threeListData: [],
  }

  componentDidMount() {
    this.getOverviewData()
    this.getThreeListData()
  }

  getOverviewData = () => {
    this.setState({
      overviewData,
    })
  }

  getThreeListData = () => {
    this.setState({
      threeListData,
    })
  }

  render() {
    const {
      overviewData,
      threeListData,
    } = this.state

    return (
      <Card
        title="三张清单总览"
        extra="绍兴市"
        showRight
        showPop
        options={overviewData.map(item => (
          <Item
            key={item.value}
            value={item.value}>
            {item.text}
          </Item>
        ))}
      >
        <div className={styles.container}>
          {
            threeListData.map(item => (
              <div
                key={item.text}
                className={styles.progress_container}>
                <div
                  className={styles.progress_title}
                  style={{
                    color: item.progressColor
                  }}>
                  {item.text}
                </div>
                <Link style={{
                  color: 'black'
                }} to={item.url}>
                  <div
                    className={styles.progress_container}
                    style={{
                      background: item.background,
                    }}>
                    <CircleProgress
                      progress={item.data}
                      progressColor={item.progressColor}
                      className={styles.circleprogress}
                    />
                    <div>完成：{item.completeData} 项</div>
                    <div>总计：{item.totalData} 项</div>
                  </div>
                </Link>
              </div>
            ))
          }
        </div>
      </Card>
    )
  }
}
